import arrow from './icons/arrow.png'

import plus from './icons/plus.png'

import reduce from './icons/reduce.png'

import triangle from './icons/triangle.png'

import triangleRight from './icons/triangle-right.png'

function dataVal(data, prop) {
  const propList = String(prop).split('.')
  return propList.reduce((pre, cur) => {
    return pre[cur]
  }, data)
}

function imgIcon(h, { row, treeIcon, handlerClick }) {
  if (treeIcon === 'plus') {
    const style = {
      marginLeft: row.level * 30 + 'px',
      marginRight: '10px',
      width: '14px',
      height: '14px'
    }
    const src = row.isOpen ? reduce : plus

    return <img src={src} class="tree-arrow" style={style} onClick={handlerClick.bind(this, row)} />
  } else if (treeIcon === 'triangle') {
    const style = {
      marginLeft: row.level * 30 + 'px',
      marginRight: '10px',
      width: '14px',
      height: '14px'
    }
    const src = row.isOpen ? triangle : triangleRight

    return <img src={src} class="tree-arrow" style={style} onClick={handlerClick.bind(this, row)} />
  } else {
    const style = {
      marginLeft: row.level * 30 + 'px',
      marginRight: '10px',
      width: '14px',
      height: '14px',
      transform: `rotate(${row.isOpen ? 90 : 0}deg)`
    }

    const src = arrow

    return <img src={src} class="tree-arrow" style={style} onClick={handlerClick.bind(this, row)} />
  }
}

// td内部是插槽
export const tdSlot = (
  h,
  { row, colConfig, colIndex, isTreeType, rowHeight, direction, cellStyle }
) => {
  let hasChildNode = false
  let haslastNodeStyle = false

  if (direction) {
    hasChildNode = colIndex === 0 && isTreeType && row.hasChildren && direction === 'left'
    haslastNodeStyle = colIndex === 0 && isTreeType && direction === 'left'
  } else {
    hasChildNode = colIndex === 0 && isTreeType && row.hasChildren
    haslastNodeStyle = colIndex === 0 && isTreeType
  }

  const cellStyleConfig = cellStyle && cellStyle && cellStyle({ colConfig: colConfig, td: row })

  const style = {
    lineHeight: rowHeight - 2 + 'px',
    textAlign: colConfig.align ? colConfig.align : 'center',
    ...(cellStyleConfig ? cellStyleConfig : {})
  }

  return (
    <td style={{ width: colConfig.width + 'px', height: rowHeight + 'px' }}>
      <div
        class="td-div"
        style={style}
        hasChildNode={hasChildNode}
        haslastNodeStyle={haslastNodeStyle}
      >
        {colConfig.slot}
      </div>
    </td>
  )
}

// td内部是无插槽
export const tdSimple = (
  h,
  { row, colConfig, colIndex, isTreeType, rowHeight, handlerClick, treeIcon, cellStyle }
) => {
  const hasChildNode = colIndex === 0 && isTreeType && row.hasChildren

  const cellStyleConfig = cellStyle && cellStyle({ colConfig: colConfig, td: row })

  const simpleStyle = {
    lineHeight: rowHeight - 2 + 'px',
    textAlign: colConfig.align ? colConfig.align : 'center',
    ...(cellStyleConfig ? cellStyleConfig : {})
  }

  const lastNodeStyle = {
    lineHeight: rowHeight - 2 + 'px',
    textAlign: colConfig.align ? colConfig.align : 'center',
    paddingLeft: colIndex === 0 && isTreeType ? row.level * 30 + 10 + 'px' : '',
    ...(cellStyleConfig ? cellStyleConfig : {})
  }

  return (
    <td style={{ width: colConfig.width + 'px', height: rowHeight + 'px' }}>
      {hasChildNode ? (
        <div class="td-div" title={dataVal(row.data, colConfig.prop)} style={simpleStyle}>
          {imgIcon(h, { row, treeIcon, handlerClick })}
          {dataVal(row.data, colConfig.prop)}
        </div>
      ) : (
        <div class="td-div" title={dataVal(row.data, colConfig.prop)} style={lastNodeStyle}>
          {dataVal(row.data, colConfig.prop)}
        </div>
      )}
    </td>
  )
}

export const getTableWidth = bottomList => {
  let width = 0
  for (let i = 0, len = bottomList.length; i < len; i++) {
    const current = bottomList[i]
    width = width + current.width
  }
  return width
}
